

<template>
  <div class="showTable">
    <div class="table-list-header" :class="{'active':open}" >
        <span>{{data.name}}</span>
        <mu-button  flat color="primary" small class="no-margin"  style="min-width:0.2rem;" @click="open = !open">
            <!-- {{!open?'展开':'收起'}} -->
            <i class="iconfont iconangle-up" v-show="open"></i>
            <i class="iconfont iconangle-down" v-show="!open"></i>
        </mu-button>
    </div>
    <div class="table-list-body" :class="{'active':open}">
       <div ref="tableHTML" >
          <section class="table">
              <div class="tr header">
                <div class="td">{{data.name}}</div>
              </div>
              <div class="tr subheader">
                <div class="td">检查项</div>
                <div class="td">检查内容</div>
                <div class="td">检查结果</div>
              </div>
              <div class="tr" v-for="(item,index) in  data.itemContentList" :key="index">
                <div class="td">{{item.item}}</div>
                <div class="td"  style="width:200%;">
                  <div class="tr" v-for="(list,sq) in item.contentList" :key="sq">
                    <div class="td">{{list.contentName}}</div>
                    <div class="td lan-table-radio" >
                      <mu-radio label="有问题" v-model="list.has" value="1" @change="radioChange(list,list.has)" ></mu-radio>
                      <mu-radio label="无问题" v-model="list.has" value="0" @change="radioChange(list,list.has)" ></mu-radio>
                    </div>
                  </div>
                </div>
                
              </div>
            </section>
      </div>
    </div>
      <div class="hasQuesBox" v-for="(item,index) in data.itemContentList" :key="index">
        <div v-for="(list,sq) in item.contentList" :key="sq">
          <questionFromR :index="data.itemContentList[index]['contentList'][sq]['sq']+''" v-if="data.itemContentList[index]['contentList'][sq]['problemList']['problemLevel']"  :areaInfor="areaInfor" :projectData="projectData" v-model="data.itemContentList[index]['contentList'][sq]['problemList']" ></questionFromR>
        </div>
      </div>
      <mu-form :model="data" class="mu-lan-form" :label-position="'left'" label-width="" v-if="formShow">
        <mu-form-item  label="检查结果" class="form-between lan-mu-radio" >
            <mu-radio v-model="data.checkResult" value="1" label="有问题" :disabled="true"></mu-radio>
            <mu-radio v-model="data.checkResult" value="0" label="无问题" :disabled="true"></mu-radio>
        </mu-form-item>
        <mu-form-item label="现场照片" class="inline-item" style="padding-bottom:0.15rem;" >
          <div v-for="(item,index) in data.scenePhotos" :key="index" class="img-box">
            <img :src="item" />
            <mu-icon class="close" value="close" @click="deleteImg(index)"></mu-icon>
          </div>
          <FileUpload @successed="imgSuccess" v-if="data.scenePhotos.length < 5"></FileUpload>
        </mu-form-item>
        <mu-form-item label="抄送人" class="form-between" >
          <!-- copyUserIds -->
          <span class="normal-font-size form-right-text" @click="userOpen = true">{{copyuserlist?copyuserlist:'请选择'}}</span>
          <i class="iconfont angle-left iconangle-right"></i>
        </mu-form-item>
    </mu-form>
    <User ref="User" v-if="userOpen" :multiple="true" :open="userOpen" :orgType="'currOrgProject'" :customRoot="projectData" @change="userChange" @close="userOpen = false"></User>
  </div>
</template>

<script>
import questionFromR from "./questionFromR"
import FileUpload from "@/fileUpload/FileUpload.vue"
import User from "@/select/user/User";
  export default {
    name: 'checkTable',
    components: {
     questionFromR,FileUpload,User
    },
    props: {
      projectData: {//项目信息
        type: Array,
        default: () => []
      },
      areaDetail: {//区域信息
        type: Object,
        default: () => {}
      },
      data: {
        type: Object,
        default: () => {}
      },
    },
    data() {
      return {
        open:true,
        areaInfor:{},
        userOpen:false,
        copyuserlist:'',
        formShow:true,
        proUrl:this.$A.baseUrl[0] + "/safety/system/download?fileUrl=",
        tableHTML:''
      }
    },
    model: {
      prop: "data",
    },
    computed: {},
    created() {
      this.areaInfor = this.areaDetail
        // this.$nextTick(o=>{
          // this.tableHTML = this.creatHtml();
          // this.$refs.tableHTML.innerHTML = this.tableHTML;
        // })
    },
    mounted() {
    },
    watch: {},
    methods: {
      deleteImg(index){
        this.data.scenePhotos.splice(index,1)
      },
      imgSuccess(list){
        if(list.code == 200){
          this.data.scenePhotos.push(this.proUrl+list.body)
        }
      },
      userChange(value){
        console.log(value)
        this.data.copyUserIds = value.map(o=>o.id)
        this.copyuserlist = value.map(o=>o.employeeName).join(',')
        this.userOpen = false;
      },
      radioChange(list,value){
        console.log(value)
        if(value == 0){
          list['problemList'] = {}
        }else{
          
          list['problemList'] =  {
            "problemTypeId": "", //--问题类型id
            "problemElseRemark": "", //--问题类型选则其它时候的备注
            "problemLevel": '1', //--问题等级 1一般 2较大 3重大
            "scenePhotos": [], ////--现场照片 格式['1','2']
            "floorPlanTag": [], //--平面图标记
            "problemDescription": "", //--问题描述
            "rectifyDto": {
              "days": '', //--整改天数 0立即整改
              "endTime": "", //--整改期限
              "responsibleUnitId": "", //--整改单位 -- 责任单位
              "responsibleUserId": "", //--整改人
              "rectificationRequirements": "", //--整改要求
              "reviewUser": "",// --复查人
              "isCurrentRect": '0',// --问题必传参数 是否现场整改 0是 1否
              "rectCopyUserIds": [] ///--整改抄送人
               
            }
          }
        }
        // 检查时否全部无问题
        let data = this.data.itemContentList
        let con = false;
        for(let i = 0; i < data.length; i++){
          for(let j = 0; j < data[i]['contentList'].length; j++){
            if(data[i]['contentList'][j]['has'] == 1){
              con = true
              break;
            }
          }
          if(con){
            break;
          }
        }
        if(con){
          this.formShow = false;
        }else{
          this.formShow = true;
        }

      },
    },
    destroyed() {
    }
  }
</script>

<style lang="scss" scoped>
.img-box{
  width:0.75rem;
  height:0.75rem;
  margin:0.1rem;
  position: relative;
  img{
    height:100%;
    width:100%;
  }
  .close{
    position: absolute;
    height:0.2rem;
    width:0.2rem;
    line-height:0.2rem;
    font-size:0.15rem;
    top: 0.04rem;
    right: 0.04rem;
    color:#fff;
    border-radius: 50%;
    text-align:center;
    background-color: #FF4242;
  }
}
.showTable{
    width:100%;
    height:100%;
     .table-list-header{
        height:0.55rem;
        width:100%;
        border-bottom:0.01rem solid #e8e8e8;
        margin:0.05rem 0 !important;
        display:flex;
        justify-content:space-between;
        align-items: center;
        color:#3D3D3D;
        font-size:0.15rem;
        padding:0 0.2rem;
    }
    .table-list-header.active{
        border-bottom:none;
    }
    .table-list-body{
        border-top:none;
        height:0;
        overflow:hidden;
        box-sizing:border-box;
        padding:0 0.2rem;
        transition: height .3s .1s;
    }
    .table-list-body.active{
        height:auto;
    }
    // 表格
    .table{
      width:100%;
      height:auto;
      border:1px solid #dedede;
      font-size:0.12rem;
      line-height:0.2rem;
      .tr{
        width:100%;
        border-bottom:1px solid #dedede;
        display:flex;
        justify-content:space-between;
        align-items:center;
        .td{
          border-left:1px solid #dedede;
          width:100%;
          text-align:center;
          .tr{
            border-bottom:1px solid #dedede;
            border-left:none;
          }
          >.tr:last-child{
            border:none;
          }
        }
        >.td:first-child{
          border:none;
        }
        .tr{
          border-left:1px solid #dedede;
        }
      }
      >.tr:last-child{
        border:none;
      }
      .header{
        background-color:#ddd;
        color:#000;
      }
      .subheader{
        background-color:#eee;
        color:#333;
      }
    }
}
</style>

<style lang="scss">
.lan-table-radio{
  .mu-radio-icon{
      .mu-radio-ripple-wrapper{
        height:30px;
        width:30px;
        top: -3px;
        left: -3px
      }
    }
}
</style>
